<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-07-08 19:55:05
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-07-12 21:36:03
 * @FilePath: \JS\java-script-learning-notes\JSCode\拖拽.html
 * @Description: 
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拖拽</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        /* 设定了positon的元素才能够调节left、top */
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      #yellow {
        /* 设定了positon的元素才能够调节left、top */
        position: absolute;
        left: 100px;
        top: 300px;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
    </style>
    <script>
      window.onload = () => {
        let box = document.getElementById("box");
        box.onmousedown = (e) => {
          /* 控制鼠标点击位置一致
              为保证性能 所以放在onnousedown里 在move里面动一点就要求一下
           */
          let ol = e.clientX - box.offsetLeft;
          let ot = e.clientY - box.offsetTop;
          document.onmousemove = (e) => {
            box.style.left = e.clientX - ol + "px";
            box.style.top = e.clientY - ot + "px";
          };
          // 需要将鼠标松开的事件放在mousedown里面
          document.onmouseup = () => {
            // 清空mousemove动作和mouseup动作
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false;
        };
        box.addEventListener(
          "wheel",
          (e) => {
            let h = parseInt(
              window.getComputedStyle(box, null)["height"].slice(0, -2)
            );
            if (e.deltaY > 0) {
              box.style.height = h + 10 + "px";
            } else {
              box.style.height = h - 10 + "px";
            }
            e.preventDefault();
          },
          false
        );
      };
    </script>
  </head>
  <body style="height: 1000px">
    <div id="box"></div>
    <div id="yellow"></div>
  </body>
</html>
